<template>
	<view
		class="chat-tools"
		:class="[
			{
				'is-show': visible
			}
		]"
	>
		<swiper>
			<swiper-item>
				<cl-row>
					<cl-col :span="6">
						<view class="block" @click="sendPhoto">
							<view class="icon">
								<text class="iconfont icon-image"></text>
							</view>
							<text class="label">照片</text>
						</view>
					</cl-col>

					<cl-col :span="6">
						<view class="block" @click="sendPhoto">
							<view class="icon">
								<text class="iconfont icon-shoot"></text>
							</view>
							<text class="label">拍摄</text>
						</view>
					</cl-col>

					<cl-col :span="6">
						<view class="block" @click="notUse">
							<view class="icon">
								<text class="iconfont icon-call"></text>
							</view>
							<text class="label">视频通话</text>
						</view>
					</cl-col>

					<cl-col :span="6">
						<view class="block" @click="notUse">
							<view class="icon">
								<text class="iconfont icon-file"></text>
							</view>
							<text class="label">文件</text>
						</view>
					</cl-col>

					<cl-col :span="6">
						<view class="block" @click="notUse">
							<view class="icon">
								<text class="iconfont icon-red-packets"></text>
							</view>
							<text class="label">红包</text>
						</view>
					</cl-col>
				</cl-row>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	props: {
		visible: Boolean
	},
	methods:{
		notUse(){
			uni.showModal({
				title:"系统提示",
				showCancel:false,
				content:"此功能暂时不能使用"
			})
		},
		sendPhoto(){
			this.$emit("sendPhoto","");
		}
	}
};
</script>

<style lang="scss" scoped>
.chat-tools {
	background-color: #f6f7f9;
	height: 0;
	transition: height 0.3s;

	&.is-show {
		height: 400rpx;
	}

	swiper {
		height: 100%;
	}

	.block {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200rpx;

		.icon {
			height: 100rpx;
			width: 100rpx;
			border-radius: 10rpx;
			background-color: #fff;
			text-align: center;
			line-height: 100rpx;

			.iconfont {
				font-size: 60rpx;
				color: #d9dbde;
			}
		}

		.label {
			margin-top: 15rpx;
			font-size: 24rpx;
			color: #333;
		}

		&:active {
			.iconfont {
				color: #999;
			}
		}
	}
}
</style>
